<template>
    <div class="job-warp">
        <div class="job-main">
            <!-- 顶部时间开始 -->
            <div class="now-date">
                <p class="week">{{ localday }}</p>
                <p class="date">{{ localdate }}</p>
            </div>
            <!-- 增加事项开始 -->
            <div class="add-job">
                <topBtn @addchildFn="addtodolist"></topBtn>
            </div>
            <!-- 显示待办事项开始 -->
            <div class="show-todo">
                <p>
                    你有 <strong>{{ todolist.length }}</strong> 个待办事项
                </p>
                <ul>
                    <li v-for="(item, index) in todolist" :key="index">
                        <span class="todone" @click="getdone(index)"></span>
                        <span> {{ item }}</span>
                        <span class="delete" @click="sub(index)">&#xe625;</span>
                    </li>
                </ul>
            </div>
            <!-- 显示完成事项开始 -->
            <div
                class="show-done"
                v-show="
                    isshowdone &&
                        (donelist.length /
                            (todolist.length + donelist.length)) *
                            100
                "
            >
                <div class="done-top">
                    <span
                        >已完成:
                        {{
                            parseInt(
                                (donelist.length /
                                    (todolist.length + donelist.length)) *
                                    100
                            )
                        }}%</span
                    >
                    <!-- 引入ui库组件 -->
                    <div class="circle-done">
                        <el-progress
                            type="circle"
                            :percentage="
                                parseInt(
                                    (donelist.length /
                                        (todolist.length + donelist.length)) *
                                        100
                                )
                            "
                            status="success"
                            width="30"
                        ></el-progress>
                    </div>
                    <!-- 开始布局ul列表 -->
                </div>
                <ul>
                    <li v-for="(item, index) in donelist" :key="index">
                        <span class="todone"></span>
                        <span>{{ item }}</span>
                    </li>
                </ul>
            </div>
            <bottomBtn
                @changeisshowChild="changeFlag"
                @clearChild="clearParent"
                :thinglist="donelist.length"
            ></bottomBtn>
        </div>
    </div>
</template>

<script>
import bottomBtn from './bottomBtn.vue'
import topBtn from './topBtn.vue'
import { gettime } from '@/utils/time'

export default {
    components: { bottomBtn, topBtn },
    props: {},
    data() {
        return {
            todolist: [],
            donelist: [
                '完成代',
                '完成代办局',
                '完成面布局',
                '办页面布局',
                '完成代办页局',
            ],
            isshowdone: 0,
            localday: '',
            localdate: '',
        }
    },
    watch: {},
    computed: {},
    methods: {
        // 完成待办事项
        getdone(index) {
            this.donelist.push(this.todolist[index])
            this.todolist.splice(index, 1)
        },
        // 删除待办事项
        sub(index) {
            this.todolist.splice(index, 1)
        },
        //增加待办事项
        addtodolist(value) {
            this.todolist.push(value)
            console.log('succeed')
        },
        //展开 隐藏待办事项
        changeFlag(value) {
            this.isshowdone = value
        },
        //清空事项
        clearParent() {
            this.todolist = []
            this.donelist = []
        },
        genTimelist() {
            const list = gettime()
            this.localdate = list[1]
            this.localday = list[0]
            console.log(list)
        },
    },
    created() {
        this.genTimelist()
    },
    mounted() {},
}
</script>
<style lang="less" scoped>
li {
    padding: 10px 35px;
    position: relative;
}

.todone::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #dde1e6;
}

.todone:hover::after {
    cursor: pointer;
    content: '✔️';
    border: 1px solid #39aa56;
    // transform: scale(1.2);
    box-shadow: 1px 1px 3px rgba(#39aa56, 0.8);
    transition: all 1s;
}
.job-warp {
    padding: 20px 20px;
    .job-main {
        .now-date {
            .week {
                color: #39aa56;
                font-weight: 700;
                font-size: 18px;
            }
            .week::before {
                font-family: 'iconfont';
                content: '\e6d9';
                margin-right: 4px;
            }
        }
        .add-job {
            margin: 20px 0;
        }
        .show-todo {
            margin-top: 10px;

            .delete {
                content: '\e622';
                font-family: 'iconfont';
                position: absolute;
                top: 5px;
                right: 0px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
            }
            .delete:hover {
                transform: scale(1.2);
            }
            p {
                padding: 20px;
                background-color: #f8f8fe;
                border-radius: 4px;
                margin-bottom: 10px;
            }
        }
        .show-done {
            li {
                color: #a3aebf;
                text-decoration: line-through;
            }
            .todone::after {
                content: '✔️';
                top: 10px;
            }
            .done-top {
                position: relative;
                padding: 20px;
                background-color: #f8f8fe;
                border-radius: 4px;
                margin: 10px 0;
                vertical-align: middle;
                .circle-done {
                    position: absolute;
                    top: -2px;
                    left: 120px;
                    transform: translateY(50%);
                }
                span {
                    margin-bottom: 10px;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>
